<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>首页 - 药品溯源防伪系统</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
    <link rel="stylesheet" href="style.css">
</head>
<body class="bg-gray-50">
    <!-- iOS 状态栏 -->
    <div class="ios-status-bar">
        <div>
            <span class="text-sm font-medium">13:37</span>
        </div>
        <div class="flex items-center">
            <i class="fas fa-signal mr-1"></i>
            <i class="fas fa-wifi mr-1"></i>
            <i class="fas fa-battery-full"></i>
        </div>
    </div>

    <!-- 内容区域 -->
    <div class="content-area">
        <!-- 顶部搜索栏 -->
        <div class="flex items-center justify-between mb-4">
            <h1 class="text-xl font-bold">药品溯源</h1>
            <div class="flex items-center">
                <i class="fas fa-bell text-gray-500 mr-4 text-lg"></i>
                <i class="fas fa-search text-gray-500 text-lg"></i>
            </div>
        </div>

        <!-- 主要功能区 -->
        <div class="ios-card flex justify-between items-center bg-blue-50 mb-6">
            <div>
                <h2 class="text-lg font-bold text-blue-900 mb-1">扫描药品溯源码</h2>
                <p class="text-sm text-blue-700">查询药品真伪，领取扫码奖励</p>
            </div>
            <div class="p-3 bg-blue-600 rounded-full">
                <i class="fas fa-qrcode text-white text-xl"></i>
            </div>
        </div>

        <!-- 统计信息 -->
        <div class="grid grid-cols-2 gap-4 mb-6">
            <div class="ios-card p-4 bg-gradient-to-r from-green-50 to-blue-50">
                <div class="flex justify-between items-center mb-2">
                    <span class="text-sm text-gray-500">本月扫码次数</span>
                    <i class="fas fa-chart-line text-blue-500"></i>
                </div>
                <div class="text-2xl font-bold text-blue-800">38</div>
            </div>
            <div class="ios-card p-4 bg-gradient-to-r from-yellow-50 to-red-50">
                <div class="flex justify-between items-center mb-2">
                    <span class="text-sm text-gray-500">累计奖励(元)</span>
                    <i class="fas fa-yen-sign text-red-500"></i>
                </div>
                <div class="text-2xl font-bold text-red-800">235.50</div>
            </div>
        </div>

        <!-- 热门药品 -->
        <div class="mb-6">
            <div class="flex justify-between items-center mb-4">
                <h2 class="text-lg font-bold">热门药品</h2>
                <span class="text-sm text-primary">查看全部</span>
            </div>
            
            <div class="medicine-card">
                <img src="https://images.unsplash.com/photo-1584308666744-24d5c474f2ae?q=80&w=200&auto=format&fit=crop" alt="Medicine" class="medicine-image">
                <div class="medicine-info">
                    <div class="medicine-name">阿莫西林胶囊</div>
                    <div class="medicine-company">国药集团</div>
                    <div class="medicine-authenticity">扫码奖励: ¥2</div>
                </div>
            </div>
            
            <div class="medicine-card">
                <img src="https://images.unsplash.com/photo-1587854692152-cbe660dbde88?q=80&w=200&auto=format&fit=crop" alt="Medicine" class="medicine-image">
                <div class="medicine-info">
                    <div class="medicine-name">布洛芬缓释胶囊</div>
                    <div class="medicine-company">华润医药</div>
                    <div class="medicine-authenticity">扫码奖励: ¥3</div>
                </div>
            </div>
        </div>

        <!-- 最近活动 -->
        <div>
            <div class="flex justify-between items-center mb-4">
                <h2 class="text-lg font-bold">最新活动</h2>
                <span class="text-sm text-primary">更多</span>
            </div>
            
            <div class="ios-card p-0 overflow-hidden">
                <img src="https://images.unsplash.com/photo-1576091160550-2173dba999ef?q=80&w=400&auto=format&fit=crop" alt="Activity" class="w-full h-32 object-cover">
                <div class="p-4">
                    <h3 class="font-bold mb-1">夏季促销活动</h3>
                    <p class="text-sm text-gray-500">扫码量达标，额外奖励翻倍</p>
                </div>
            </div>
        </div>
    </div>

    <!-- iOS TabBar -->
    <div class="ios-tab-bar">
        <a href="home.html" class="tab-item active">
            <i class="fas fa-home"></i>
            <span>首页</span>
        </a>
        <a href="scan.html" class="tab-item">
            <i class="fas fa-qrcode"></i>
            <span>扫一扫</span>
        </a>
        <a href="rewards.html" class="tab-item">
            <i class="fas fa-gift"></i>
            <span>奖励</span>
        </a>
        <a href="profile.html" class="tab-item">
            <i class="fas fa-user"></i>
            <span>我的</span>
        </a>
    </div>
</body>
</html> 